<template>
  <view class="add-meter">
    <view class="form-box">
      <view class="form-item">
        <view class="item-label">安装位置</view>
        <view class="item-content"><input :disabled="!enableEdit" placeholder="请输入电表名称" v-model="name"/></view>
      </view>
      <view class="form-item">
        <view class="item-label">SN</view>
        <view class="item-content"><input placeholder="请扫描电表二维码" disabled v-model="SN"/></view>
        <i v-if="enableEdit" class="operate-icon iconfont icon-scan" @click="scanQR()"/>
      </view>
    </view>
    <view v-if="enableEdit" class="submit-btn" @click="doSubmit()">确定</view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
export default {
  mixins: [mixin],
  data() {
    return {
      projectId: '',
      id: '',
      name: '',
      SN: '',
      loading: false,
      enableEdit: false
    };
  },
  onLoad() {
    const self = this
    self.enableEdit = self.params.canEdit === 'true'
    self.projectId = self.params.projectId || ''
    self.id = self.params.id || ''
    uni.setNavigationBarTitle({
      title: self.id ? '编辑电表' : '新增电表'
    })
    self.getMeter()
  },
  methods: {
    getMeter() {
      const self = this
      if (!self.id) return
      uni.request({
        url: '/project_dtu/get',
        data: {
          id: self.id
        },
        success(result) {
          if (result.data.success && result.data.data) {
            const { name, SN } = result.data.data
            self.name = name
            self.SN = SN
          }
        },
        complete() {
          self.loading = false
        }
      })
    },
    scanQR() {
      const self = this
      uni.scanCode({
        scanType: ['qrCode'],
        success(res) {
          console.log(res)
          const reg = /^((\d{15,})|SN:(\d{15,}),IMEI:\d+)$/
          const matchResult = res.result.match(reg)
          if (matchResult) {
            self.SN = matchResult[2] || matchResult[3]
          } else {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        },
        fail(e) {
          if (!e.errMsg?.includes('cancel')) {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        }
      });
    },
    checkCanSubmit() {
      const self = this
      if (self.loading) return false;
      if (!self.name) {
        uni.showToast({
          icon: 'none',
          title: '请输入电表名称'
        })
        return false
      }
      if (!self.SN) {
        uni.showToast({
          icon: 'none',
          title: '请扫描电表二维码'
        })
        return false
      }
      return true
    },
    doSubmit() {
      const self = this
      if (self.checkCanSubmit()) {
        self.submit()
      }
    },
    submit() {
      const self = this
      self.loading = true
      const data = {
        xm_id: self.projectId,
        name: self.name,
        SN: self.SN
      }
      let url = '/project_dtu/add'
      if (self.id) {
        data.id = self.id
        url = '/project_dtu/modify'
      }
      uni.request({
        url,
        method: 'POST',
        data,
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        },
        complete() {
          self.loading = false
        }
      })
    },
    goBack() {
      uni.navigateBack()
    }
  }
};
</script>

<style lang="scss" scoped>
.add-meter {
  min-height: 100vh;
  background-color: $white;
  padding: 10rpx 30rpx 120rpx;
  .form-box {
    .form-item {
      height: 100rpx;
      border-bottom: 2rpx solid $border-base;
      padding: 20rpx 50rpx 20rpx 150rpx;
      position: relative;
      display: flex;
      align-items: center;
      .item-label {
        position: absolute;
        left: 0;
        font-size: $font-size-3;
        font-weight: bold;
      }
      .item-content {
        text-align: right;
        width: 100%;
        font-size: $font-size-2;
        &.placeholder {
          color: $text-placeholder;
        }
      }
      .operate-icon {
        position: absolute;
        right: 0;
        font-size: $font-size-6;
        color: $primary;
        &.location {
          color: $success;
        }
        &:after {
          position: absolute;
          content: '';
          display: block;
          left: -10rpx;
          right: -10rpx;
          top: -10rpx;
          bottom: -10rpx;
        }
      }
    }
  }
  .submit-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $primary;
    color: $white;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-4;
  }
}
</style>
